<template>
  <div class="_wz_cent_main _wz_curriculum">
    <div class="_wz_curriculums">
      <div class="_wz_curriculum_left">
        <div class="_wz_deptPuery">
          <Form inline @keydown.native.enter.prevent="">
            <FormItem>
              <i-input type="text" v-model="formDataSearch.planName" placeholder="培训课程" style="width: 162px;min-width: 162px;" clearable />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="searchSubmit">搜索</Button>
              <Button type="primary" @click="advancedSearch">高级搜索</Button>
            </FormItem>
          </Form>
        </div>
        <div class="_wz_ztList">
          <div style="width: 100%;height: 100%;display: flex; align-items: center;color: #515a6e;font-size: 12px;" v-if="data0.length < 1">
            <div style="margin:auto;">暂无数据</div>
          </div>
          <div v-else v-for="item in data0" class="_wz_ztList_data" @click="dataSelect(item)" :class="{_wz_select : active.id == item.id}">
            <div style="border-bottom: 1px solid #EDEEEF;padding: 0 0 8px 0;">
              <div style="float: left;width: 200px;">
                <div style="font-size: 14px;font-weight: 600;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
                  {{ item.trainCoursePlanName }}
                </div>
                <span style="font-size: 12px;color: #ABABAB;">{{ item.trainCoursePlanCreateYear }}年{{ item.trainCoursePlanCreateMonth }}月</span>
              </div>
              <div style="float: left;width: calc(100% - 200px);">
                <span v-if="item.trainCoursePlanFinish == 0" class="_wz_stateCourse" style="background: #f90;">未开始</span>
                <span v-else-if="item.trainCoursePlanFinish == 1" class="_wz_stateCourse" style="background: #19be6b;">已完成</span>
                <span v-else class="_wz_stateCourse" style="background: #57a3f3;">进行中</span>
              </div>
              <h6 style="clear: both;"></h6>
            </div>

            <div style="font-size: 14px;font-weight: 500;line-height: 30px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
              {{ item.deptName }}
            </div>
            <div style="line-height: 30px;">
              <span>
                <span style="color: #ABABAB;">课程类型：</span>{{ item.trainCoursePlanTypeName }}
              </span>
              <span>
                <span style="color: #ABABAB;">培训方向：</span>{{ item.trainCoursePlanDirectionName }}
              </span>
            </div>
            <div style="line-height: 30px;">
              <span>
                <span style="color: #ABABAB;">培训进度：</span>{{ item.trainCoursePlanFinishedNumber }}/{{ item.trainCoursePlanTotalNumber }}
              </span>

              <span style="margin: 0 0 0 24px;">
                <span style="color: #ABABAB;">完成率：</span>{{ !!item.trainCoursePlanTotalNumber?((item.trainCoursePlanFinishedNumber / item.trainCoursePlanTotalNumber) * 100).toFixed(2):0 }}%
              </span>
            </div>
          </div>
        </div>
        <Page :total="tableTotal" size="small" :current="page" @on-change="changePage" :styles="pageStyle" />
      </div>
      <div class="_wz_curriculum_right">
        <BackTop :height="100" :bottom="200">
          <div class="top">返回顶端</div>
        </BackTop>
        <Card dis-hover :bordered="true" style="margin-bottom: 10px;" class="_wz_ztList_cont">
          <p slot="title">课程信息</p>
          <div class="_wz_ztList_cont_span">
            培训周期：<span>{{ !!active ? active.trainCoursePlanCreateYear + '年' : '--' }}{{ !!active ? active.trainCoursePlanCreateMonth + '月' : '--' }}</span>
            <Divider type="vertical" />
            培训课程：<span>{{ !!active ? active.trainCoursePlanName : '--' }}</span>
            <Divider type="vertical" />
            课程类型：<span>{{ !!active ? active.trainCoursePlanTypeName : '--' }}</span>
            <Divider type="vertical" />
            运输类型：<span>{{ !!active ? active.deptTransportTypeName : '--' }}</span>
            <Divider type="vertical" />
            培训方向：<span>{{ !!active ? active.trainCoursePlanDirectionName : '--' }}</span><br>
            发布类型：<span>{{ !!active ? active.trainCoursePlanPublish == 0 ? '按身份发布' : '按学员发布' : '--' }}</span>
            <Divider type="vertical" />
            从业身份：<span>{{ !!active ? active.trainCoursePlanPublishValueName : '--' }}</span>
            <Divider type="vertical" />
            随堂测试：
            <span v-if="!!active && active.trainCoursePlanExam === 0">未添加</span>
            <span v-else-if="!!active">{{ (!!active && active.trainCoursePlanExamFinish == 0) ? "未开始" : (!!active && active.trainCoursePlanExamFinish == 1) ? "已完成" : "进行中" }}</span>
            <span v-else>暂无数据</span>
            <Divider type="vertical" />
            课题数量：<span>{{ !!active ? active.trainCoursePlanMaterialNumber + '个' : '--' }}</span>
            <Divider type="vertical" />
            应学时长：<span>{{ !!active ? active.trainCoursePlanTotalDuration + '分钟' : '--' }}</span><br>
            已完成：<span>{{ !!active ? active.trainCoursePlanFinishedNumber + '人' : '--' }}</span>
            <Divider type="vertical" />
            进行中：<span>{{ !!active ? active.trainCoursePlanUnfinishedNumber + '人' : '--' }}</span>
            <Divider type="vertical" />
            未开始：<span>{{ !!active ? active.trainCoursePlanUnstartNumber + '人' : '--' }}</span>
            <Divider type="vertical" />
            培训时间：
            <span style="margin:0 5px 0 0;">{{ !!active ? active.trainCoursePlanBeginDate : '--' }}</span>
            -
            <span style="margin:0 0 0 5px;">{{ !!active ? active.trainCoursePlanEndDate : '--' }}</span>
          </div>
        </Card>
        <Card dis-hover :bordered="true" style="margin-bottom: 10px;">
          <p slot="title">课题列表</p>
          <wzTbale :tableData="tableData1"></wzTbale>
        </Card>
        <Card dis-hover :bordered="true" style="margin-bottom: 10px;" v-show="trainCoursePlanExam == 1">
          <p slot="title">随堂检验</p>
          <wzTbale :tableData="tableData2"></wzTbale>
        </Card>

        <Card dis-hover :bordered="true" style="margin-bottom: 10px;">
          <p slot="title">人员列表</p>
          <div slot="extra">
            <Form :model="userSearch" label-position="right" :label-width="0" inline>
              <FormItem>
                <i-select v-model="userSearch.driverType" filterable placeholder="请选择从业类型" clearable>
                  <Option v-for="item in personType" :value="item.code" :key="item.code">{{ item.value }}</Option>
                </i-select>
              </FormItem>
              <FormItem>
                <i-select v-model="userSearch.finishState" filterable placeholder="请选择培训情况" clearable>
                  <Option value="0">未开始</Option>
                  <Option value="1">已完成</Option>
                  <Option value="2">进行中</Option>
                </i-select>
              </FormItem>
              <Button type="primary" @click="userSearchFun">搜索</Button>
              <Button type="success" @click="ExpoStud">导出</Button>
              <Button type="success" @click="PrintstudStudy">打印</Button>
            </Form>
          </div>
          <wzTbale :tableData="tableData3"  ref="wzTbale3" v-if="!!active"></wzTbale>
        </Card>

        <!--右侧单独加载-->
        <Spin size="large" fix v-if="spinRightShow"></Spin>
      </div>
    </div>

    <Drawer v-model="modal" :title="headline" :draggable="true" width="700" @on-close="changeModal">
      <materialVideo v-if="modal && materialType==1" :materialData="materialData"></materialVideo>
      <materialIframe v-else-if="modal && materialType==5" :materialData="materialData"></materialIframe>
      <materialExam v-else-if="modal && materialType==6" :materialData="materialData"></materialExam>
    </Drawer>


    <Drawer v-model="modalPrint" :title="headline" :draggable="true" width="800" @on-close="changeModal">
<!--    <Modal v-model="modalPrint" :title="headline" width="80%" fullscreen :footer-hide="true" @on-visible-change="changeModal" class-name="vertical-center-modal">-->
      <PrintLearning v-if="modalPrint" :materialData="materialData" :active="active"></PrintLearning>
<!--    </Modal>-->
    </Drawer>

    <Modal v-model="advanced" title="高级搜索" :mask="false" :footer-hide="true" :styles="{top: '66px',right:'10px',position:'absolute',width:'calc(100% - 360px - 240px - 20px)'}" @on-cancel="advanced =false">
      <Form inline :label-width="80">
        <FormItem label="培训课程">
          <i-input type="text" v-model="formDataSearch.planName" placeholder="培训课程" clearable />
        </FormItem>
        <FormItem label="培训年份">
          <DatePicker type="year" @on-change="formDataSearch.createYear = $event" v-model="formDataSearch.createYear" placeholder="培训年份"></DatePicker>
        </FormItem>
        <FormItem label="培训月份">
          <i-select v-model="formDataSearch.createMonth" filterable placeholder="培训月份" clearable>
            <Option v-for="item in monthData" :value="item.val" :key="item.val">{{ item.val }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="完成状态">
          <i-select v-model="formDataSearch.finishState" filterable placeholder="完成状态" clearable>
            <Option value="0">未开始</Option>
            <Option value="2">进行中</Option>
            <Option value="1">已完成</Option>
          </i-select>
        </FormItem>
        <FormItem label="随堂考试">
          <i-select v-model="formDataSearch.examState" filterable placeholder="是否存在随堂" clearable>
            <Option value="1">是</Option>
            <Option value="0">否</Option>
          </i-select>
        </FormItem>
        <FormItem label="运输企业">
          <i-select v-model="formDataSearch.deptUuid" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Modal>

    <Drawer :title="dynamicTitle.driverName + '学员课程概述'" v-model="value1" width="900" :draggable="true">
      <Card dis-hover :bordered="true" style="margin:10px 0;">
        <p slot="title">学员基本信息</p>
        <div>
          <div style="margin:0 0 10px 0;position: relative;">
            <div style="margin:0 10px 0 0;float: left;margin: 0px 10px 0px 0px;display: block;width: 100px;height: 132px;text-align: center;line-height: 60px;border: 1px solid transparent;border-radius: 4px;overflow: hidden;background: #fff;position: relative;box-shadow: 0 1px 1px rgba(0, 0, 0, .2);">
              <viewer style="width: 100%;height: 100%;">
                <img style="width: 100%;height: 100%;" :src="!!dynamicTitle.driverAvatar?apiUrl.imgUrl+dynamicTitle.driverAvatar:'../../../assets/xxwc.png'" @error="public.imgDispose" />
              </viewer>
            </div>
            <div class="_wz_userData">
              <div style="line-height: 33px;height: 33px;">从业人员：{{ dynamicTitle.driverName }}</div>
              <div style="line-height: 33px;height: 33px;">驾乘车辆：{{ dynamicTitle.driverVehicleNo }}</div>
              <div style="line-height: 33px;height: 33px;">从业类型：{{ dynamicTitle.driverTypeName }}</div>
              <div style="line-height: 33px;height: 33px;">身份证号：{{ dynamicTitle.driverIdentifyNum }}</div>
            </div>
            <img v-if="dynamicTitle.trainCourseStudentPlanTaskFinish == 1" src="../../../assets/xxwc.png" @error="public.imgDispose" style="position: absolute;bottom: 20px;right: 20px;" />
            <h6 style="clear: both;"></h6>
          </div>
        </div>
      </Card>


      <Table v-if="value1" stripe ref="table5" highlight-row @on-current-change="highlightRow" :loading="loading5" border :columns="columns5" :data="data5"></Table>
      <viewLearningRecords v-if="recordDetails" :highlightRowData="highlightRowData"></viewLearningRecords>
    </Drawer>


    <Drawer :title="dynamicTitle.driverName + '学员课程打印'" v-model="prinLearningType" width="900" :draggable="true">
      <learningRecord v-if="prinLearningType" :selectData="dynamicTitle"></learningRecord>
    </Drawer>
    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
import materialIframe from '../public/materialIframe.vue'
import materialVideo from '../public/materialVideo.vue'
import materialExam from '../public/materialExam.vue'

import PrintLearning from './PrintLearning.vue'
import viewLearningRecords from './viewLearningRecords.vue'
import wzTbale from "../../../components/table/table";
import learningRecord from "./learningRecord";

export default {
  components: {
    materialIframe,//文档
    materialVideo,//视频
    materialExam,//试题
    PrintLearning,//打印情况
    viewLearningRecords,//学习详细
    wzTbale,//列表
    learningRecord,//学习记录 打印
  },
  data() {
    return {
      personType: [],//从业类型
      userSearch:{},
      loadingQuantity:0,
      spinRightShow: false,//右侧单独加载
      spinShow: false,//本页加载
      subDeptList: [],//运输企业
      prinLearningType: false,//打印单学员学习记录
      recordDetails: false,//记录详情
      highlightRowData: {},//查看一个人一个课件的详情
      dynamicTitle: "",//随堂和学习记录 title
      value1: false,//随堂测验成绩
      modal: false,//弹出层状态
      modalPrint: false,//打印弹出层
      materialData: {},//选择素材的所有数据
      headline: "",//弹框标题
      materialType: 0,//6 试题   5 html   1 视频   7 打印情况
      active: null,
      pageStyle: {
        textAlign: "center"
      },
      formDataSearch: {},//搜索条件
      searchCriteria: {},//点击搜索 从新赋值
      data0: [],


      trainCoursePlanExam: 0,//判断是否有随堂
      advanced: false,//高级搜索

      page: 1,//当前页码
      limit: 10,//当前页码
      tableTotal: 0,//总条数

      monthData: [
        {"name": "一月份", "val": "01"},
        {"name": "二月份", "val": "02"},
        {"name": "三月份", "val": "03"},
        {"name": "四月份", "val": "04"},
        {"name": "五月份", "val": "05"},
        {"name": "六月份", "val": "06"},
        {"name": "七月份", "val": "07"},
        {"name": "八月份", "val": "08"},
        {"name": "九月份", "val": "09"},
        {"name": "十月份", "val": "10"},
        {"name": "十一月份", "val": "11"},
        {"name": "十二月份", "val": "12"},
      ],//月份数据
      tableData1: {
        where: {},//搜索条件
        height: 'auto',//表格高度 auto
        page: false,//分页是否使用
        columns: [//表头数据
          {type: 'index', width: 70, align: 'center', title: '序号'},
          {
            title: '课题名称', key: 'materialTrainName', minWidth: 200,
            render: (h, params) => {
              return h('div', [
                h('i', {
                  class: [(params.row.materialTrainType == 1) ? "fa fa-file-movie-o" : "fa fa-file-word-o"],
                  style: {
                    color: (params.row.materialTrainType == 1) ? "#2d8cf0" : "#009688",
                    "font-size": "12px",
                    "margin": "0px 5px 0px 0px",
                  },
                }, ''),
                h('span', params.row.materialTrainName)
              ]);
            }
          },
          {title: '课题类型', key: 'materialTrainTransportTypeName', minWidth: 120},
          {title: '课题方向', key: 'materialTrainDirectionName', minWidth: 120},
          {
            title: '课题类型', key: 'materialTrainType', minWidth: 120, render: (h, params) => {
              return h('span', (params.row.materialTrainType == 1) ? "视频" : "文档");
            }
          },
          {
            title: '课题时长', key: 'trainCoursePlanTaskDuration', minWidth: 120, render: (h, params) => {
              return h('span', params.row.trainCoursePlanTaskDuration + "分钟");
            }
          },
          {
            title: '培训情况', key: 'trainCoursePlanTaskFinish', minWidth: 160, render: (h, params) => {
              return h('Tag', {
                props: {
                  type: 'dot',
                  color: (params.row.trainCoursePlanTaskFinish == 0) ? "" : (params.row.trainCoursePlanTaskFinish == 1) ? "success" : "warning"
                }
              }, (params.row.trainCoursePlanTaskFinish == 0) ? "未开始" : (params.row.trainCoursePlanTaskFinish == 1) ? "已完成" : "进行中");
            }
          },
          {
            title: '培训进度', minWidth: 120, render: (h, params) => {
              return h('span', params.row.trainCoursePlanTaskFinishedNumber + "/" + params.row.trainCoursePlanTaskTotalNumber);
            }
          },
        ],
        dataList: [],
      },

      tableData2: {
        where: {},//搜索条件
        height: 'auto',//表格高度 auto
        page: false,//分页是否使用
        columns: [//表头数据
          {type: 'index', width: 70, align: 'center', title: '序号'},
          {title: '考试名称', key: 'examPlanName', minWidth: 200},
          {title: '试卷类型', key: 'materialExamTransportTypeName', minWidth: 120},
          {
            title: '考题数量', key: 'examPlanAmount', minWidth: 120, render: (h, params) => {
              return h('span', (!!params.row.examPlanAmount ? params.row.examPlanAmount : 0) + "题");
            }
          },
          {
            title: '考题总分', key: 'examPlanTotalScore', minWidth: 120, render: (h, params) => {
              return h('span', (!!params.row.examPlanTotalScore ? params.row.examPlanTotalScore : 0) + "分");
            }
          },
          {
            title: '及格分数', key: 'examPlanPassScore', minWidth: 120, render: (h, params) => {
              return h('span', (!!params.row.examPlanPassScore ? params.row.examPlanPassScore : 0) + "分");
            }
          },
          {
            title: '考试情况', key: '', minWidth: 160, render: (h, params) => {
              return h('Tag', {
                props: {
                  type: 'dot',
                  color: (params.row.examPlanFinish == 0) ? "" : (params.row.examPlanFinish == 1) ? "success" : "warning"
                }
              }, (params.row.examPlanFinish == 0) ? "未开始" : (params.row.examPlanFinish == 1) ? "已完成" : "进行中");
            }
          },
          {
            title: '考试进度', key: '', minWidth: 120, render: (h, params) => {
              return h('span', params.row.examPlanFinishNumber + "/" + params.row.examPlanNumber);
            }
          },
        ],
        dataList: [],
      },
      tableData3: {
        url: this.apiUrl.webApi + "/educate/trainPlan/trainCourseStudentPlanPageList",//请求地址
        method: 'post',//请求方式
        where: {},//搜索条件
        height: 'auto',//表格高度 auto
        page: true,//分页是否使用
        columns: [//表头数据
          {type: 'index', width: 70, align: 'center', title: '序号'},
          {title: '从业人员', key: 'driverName', minWidth: 120},
          {title: '从业类型', key: 'driverTypeName', minWidth: 120},
          {title: '驾乘车辆', key: 'driverVehicleNo', minWidth: 100},
          {title: '身份证号', key: 'driverIdentifyNum', minWidth: 200},
          {title: '联系电话', key: 'driverPhone', minWidth: 160},

          {
            title: '培训情况', key: '', minWidth: 130, render: (h, params) => {
              return h('Tag', {
                props: {
                  type: 'dot',
                  color: (params.row.trainCourseStudentPlanFinish == 0) ? "" : (params.row.trainCourseStudentPlanFinish == 1) ? "success" : "warning"
                }
              }, (params.row.trainCourseStudentPlanFinish == 0) ? "未开始" : (params.row.trainCourseStudentPlanFinish == 1) ? "已完成" : "进行中");
            }
          },
          {
            title: '培训时长', key: 'trainCourseStudentPlanTotalDuration', minWidth: 140, render: (h, params) => {
              return h('span', params.row.trainCourseStudentPlanLearnDuration + "/"+params.row.trainCourseStudentPlanTotalDuration + "分钟");
            }
          },
          {
            title: '培训进度', key: '', minWidth: 120, render: (h, params) => {
              return h('span', params.row.trainCourseStudentPlanFinishedNumber + "/" + params.row.trainCourseStudentPlanMaterialNumber);
            }
          },
          {
            title: '随堂测验', key: '', minWidth: 130, render: (h, params) => {
              var test = h('span', '--');
              if (params.row.trainCourseStudentPlanExam == 1) {
                test = h('Tag', {
                  props: {
                    type: 'dot',
                    color: (params.row.trainCourseStudentPlanExamState == 0) ? "error" : (params.row.trainCourseStudentPlanExamState == 1) ? "success" : "warning"
                  }
                }, (params.row.trainCourseStudentPlanExamState == 0) ? "未考试" : (params.row.trainCourseStudentPlanExamState == 1) ? "及格" : "不及格");
              }
              return test
            }
          },
          {
            title: '操作', fixed: 'right', width: 120, render: (h, params) => {
              let operationButtons = [];
              operationButtons.push(h('span', {
                style: {"color": "#2d8cf0", "cursor": "pointer"},
                on: {
                  click: () => {
                    this.indiLear(params.row)
                  }
                }
              }, "查看"))
              //if(params.row.trainCourseStudentPlanFinish == 1 && params.row.trainCourseStudentPlanExamState != 0){
              operationButtons.push(h('Divider', {props: {type: 'vertical',}}, ''))
              operationButtons.push(h('span', {
                style: {"color": "#2d8cf0", "cursor": "pointer"},
                on: {
                  click: () => {
                    this.dynamicTitle = params.row
                    this.prinLearningType = true;
                  }
                }
              }, "打印"))
              //}

              return operationButtons;
            },
          },

        ],
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },


      loading5: true,
      columns5: [
        {type: 'index', width: 70, align: 'center', title: '序号'},
        {title: '课题名称', key: 'materialTrainName', minWidth: 160},
        {
          title: '培训情况', key: '', minWidth: 160, render: (h, params) => {
            return h('Tag', {
              props: {
                type: 'dot',
                color: (params.row.trainCourseStudentPlanTaskFinish == 0) ? "" : (params.row.trainCourseStudentPlanTaskFinish == 1) ? "success" : "warning"
              }
            }, (params.row.trainCourseStudentPlanTaskFinish == 0) ? "未开始" : (params.row.trainCourseStudentPlanTaskFinish == 1) ? "已完成" : "进行中");
          }
        },
        {
          title: '开始时间', key: 'trainCourseStudentPlanTaskBeginTime', minWidth: 180, render: (h, params) => {
            return h('span', (!!params.row.trainCourseStudentPlanTaskBeginTime) ? params.row.trainCourseStudentPlanTaskBeginTime : "--");
          }
        },
        {
          title: '结束时间', key: 'trainCourseStudentPlanTaskEndTime', minWidth: 180, render: (h, params) => {
            return h('span', (!!params.row.trainCourseStudentPlanTaskEndTime) ? params.row.trainCourseStudentPlanTaskEndTime : "--");
          }
        },
      ],
      data5: [],

    }
  },
  beforeCreate() {//beforeCreate创建前状态
  },
  created() {//created创建完毕状态
  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程
  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })

    //加载从业类型字典
    that.axios.post(that.apiUrl.systemDictSystemDictList, {type: 'person_type'}).then(res => {
      if (!!res) {
        that.personType = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })
    that.tableLoadData();

  },
  methods: {//执行的方法
    userSearchFun(){
      var that = this;
      var data = JSON.parse(JSON.stringify(that.userSearch))
      data.trainPlanUuid = that.active.uuid
      that.tableData3.where = data;
      that.$refs.wzTbale3.tableLoadData(true);

    },
    tableLoadData() {
      let that = this;
      let searchCriteria = that.searchCriteria;//获取表单数据  和分页 条数
      searchCriteria.page = that.page;
      searchCriteria.limit = that.limit;
      searchCriteria.releaseState = 1;
      //左侧期列表
      that.spinShow = true;
      that.axios.post(that.apiUrl.webApi + "/educate/trainPlan/trainCoursePlanPageList", searchCriteria).then(res => {
        that.spinShow = false;
        if (!!res) {
          if (res.data.data.length > 0) {
            that.active = res.data.data[0];
            that.data0 = res.data.data;//返回数据
            that.tableTotal = res.data.count;
            that.loadCourseware(res.data.data[0]);
          } else {
            that.active = null;
            that.data0 = [];//返回数据
            that.tableTotal = 0;

            that.tableData1.dataList = [];
            that.tableData2.dataList = [];//返回数据
            // that.tableData3.dataList = [];//返回数据

            // //人员
            that.tableData3.where = {};
            that.$refs.wzTbale3.tableLoadData(true);
          }
        }
      }).catch(err => {
        console.log('失败', err);
      })
    },
    changePage(page) {//返回第几页
      this.page = page;//设置当前页数
      this.tableLoadData();
    },
    dataSelect(data) {
      this.active = data;
      this.loadCourseware(data);
    },
    //加载课件 学员
    loadCourseware(data) {
      let that = this;
      that.loadingQuantity = (data.trainCoursePlanExam == 0) ? 1 : 2;
      that.spinRightShow = true;
      that.axios.post(that.apiUrl.webApi + "/educate/trainPlan/trainCoursePlanTaskList", {trainPlanUuid: data.uuid}).then(res => {
        that.loadingQuantity = that.loadingQuantity - 1;
        if (!!res) {
          that.tableData1.dataList = res.data.data;//返回数据
        }
      }).catch(err => {
        console.log('失败', err);
      })

      //随堂
      //      课程培训随堂测验：0：不存在，1：存在 trainCoursePlanExam;
      if (data.trainCoursePlanExam == 0) {
        that.trainCoursePlanExam = 0;
      } else {
        that.trainCoursePlanExam = 1;
        that.axios.post(that.apiUrl.webApi + "/educate/examPlan/examPlanInfo", {trainPlanUuid: data.uuid}).then(res => {
          that.loadingQuantity = that.loadingQuantity - 1;
          if (!!res) {
            if (!!res.data.data) {
              that.tableData2.dataList = [res.data.data];//返回数据
            } else {
              that.trainCoursePlanExam = 0;
            }
          }
        }).catch(err => {
          console.log('失败', err);
        })
      }
      //人员
      var data = JSON.parse(JSON.stringify(that.userSearch))
      data.trainPlanUuid = that.active.uuid
      that.tableData3.where = data;
      that.$nextTick(function () {
        that.$refs.wzTbale3.tableLoadData(true);
      })
    },
    //打印所有学员
    PrintstudStudy() {
      let that = this;
      if (!!that.active) {
        that.spinShow = true;

        var data = JSON.parse(JSON.stringify(that.userSearch))
        data.trainPlanUuid = that.active.uuid
        that.axios.post(that.apiUrl.webApi + "/educate/trainPlan/trainCourseStudentPlanPrint", data).then(res => {
          that.spinShow = false;
          if (!!res) {
            that.headline = "培训信息"
            that.materialData = res.data.data;
            that.modalPrint = true;
          }
        }).catch(err => {
          console.log('失败', err);
        })
      } else {
        that.$Message.warning("请选择要打印的课程");
      }
    },
    //导出
    ExpoStud() {
      let that = this;
      if (!!that.active) {
        that.spinShow = true;
        var data = JSON.parse(JSON.stringify(that.userSearch));
        data.trainPlanUuid = that.active.uuid;
        that.axios.post(that.apiUrl.webApi + "/educate/trainPlan/trainCourseStudentPlanExport", data).then(res => {
          that.spinShow = false;
          if (!!res) {
            window.open(that.apiUrl.imgUrl + res.data.data)
          }
        }).catch(err => {
          console.log('失败', err);
        })
      } else {
        that.$Message.warning("请选择要导出的课程");
      }
    },
    //弹框关闭使用
    changeModal(type) {
      if (!type) {
        this.materialType = 0;
      }
    },
    //高级搜索
    advancedSearch() {
      let that = this;
      that.advanced = true;
    },
    //个人学习
    indiLear(data) {
      let that = this;
      that.spinShow = true;
      that.axios.post(that.apiUrl.educateTrainPlanTrainCourseStudentPlanTaskList, {
        studentPlanUuid: data.uuid
      }).then(res => {
        that.spinShow = false;
        if (!!res) {
          that.value1 = true;
          that.dynamicTitle = data;
          that.data5 = res.data.data;
          that.loading5 = false;
          that.$nextTick(function () {
            if (res.data.data.length > 0) {
              that.$refs.table5.$refs.tbody.clickCurrentRow(0);
            }
            that.recordDetails = true;
          })
        }
      }).catch(err => {
        console.log('失败', err);
      })
    },
    highlightRow(news, old) {
      this.highlightRowData = news;
    },
    //搜索
    searchSubmit() {
      this.page = 1;//设置当前页数
      this.searchCriteria = JSON.parse(JSON.stringify(this.formDataSearch));
      this.tableLoadData();
    },
  },
  watch: {//监听
    loadingQuantity(news, old) {
      if (news === 0) {
        this.spinRightShow = false;
      }
    }
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_curriculum {
  ._wz_curriculums {
    height: 100%;

    ._wz_curriculum_left {
      float: left;
      height: 100%;
      width: 350px;
      box-sizing: border-box;
      background: #fff;
      overflow: auto;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      color: #666;
      padding: 10px;
      border: 1px solid #e8eaec;

      ._wz_deptPuery {
        font-size: 12px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 40px;
        cursor: pointer;
        color: #666;
        box-sizing: border-box;
        margin: 10px 0;
      }

      ._wz_ztList {
        height: calc(100% - 57px - 40px - 20px);
        font-size: 12px;
        width: 100%;
        overflow: auto;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        color: #666;
        padding: 0 10px;
        box-sizing: border-box;

        ._wz_ztList_data {
          border: 2px solid #EDEEEF;
          border-radius: 4px;
          padding: 8px;
          margin-bottom: 10px;
          letter-spacing: 1px;

          ._wz_stateCourse {
            color: #fff;
            border-radius: 30px;
            display: block;
            margin: 7px auto;
            padding: 0 6px;
            width: 50px;
            height: 26px;
            line-height: 26px;
          }

        }

        ._wz_ztList_data:hover {
          border-color: #EFB987;
        }

        ._wz_select {
          background: #FEF7EA;
          border-color: #EFB987;
        }
      }

    }

    ._wz_curriculum_right {
      height: 100%;
      width: calc(100% - 360px);
      float: left;
      margin: 0 0 0 10px;
      box-sizing: border-box;
      overflow: auto;
      position: relative;

      ._wz_ztList_cont {
        ._wz_ztList_cont_span {
          line-height: 30px;
          color: #ababab;

          span {
            margin: 0 10px 0 0;
            color: #01AAED;
            word-break: break-all;
          }
        }
      }
    }
  }

  .vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal {
      top: 0;
    }
  }
}

</style>
